<template>
  <div v-if="scpName">
    <el-card class="box-card" shadow="always">

      <div slot="header" class="clearfix">
            <span style="font-size: 20px;font-weight: bold">
            {{ scpName }},欢迎！
            </span>
        <el-image
            style="float: right;padding: 3px 0;width: 80px;height: 25px"
            :src="require('@/assets/zwynt.png')"
            fit="contain">
        </el-image>
      </div>

      <!-- 菜单 -->
      <el-tabs tab-position="left">
        <el-tab-pane>
          <span slot="label"><em class="el-icon-c-scale-to-original"></em>询价信息</span>
            <RequestForm></RequestForm>
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
  <div v-else>
    <el-card class="box-card" shadow="always">
        <span style="font-size: 20px">
          请登录SCP后打开此扩展!!!
        </span>
    </el-card>
  </div>
</template>

<script>
import BasicLayout from "@/components/BasicLayout";
import RequestForm from "@/components/RequestForm";
export default {
  name: 'app',
  components: {RequestForm, BasicLayout},
  data() {
    return {
      scpName: '',
    }
  },
  created() {
    var that = this
    chrome.tabs.query({active: true, currentWindow: true}, (tab) => {
      console.log(tab[0])
      if (tab[0].title !== "i-SCP") {
        //没有登陆SCP
      } else {
        //抓取scp用户名
        chrome.tabs.sendMessage(tab[0].id, {action: "GetSCPUserName"}, function (response) {
          console.log('response:' + response)
          that.scpName = response.name
        });
      }
    })
  },
  methods: {}
}
</script>

<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 700px;
}

</style>
